<template>
  <div>
  <div v-for="(data,index) in dataSource" style="margin-bottom: 10px">
    <a-col :span="24">
      <a-card hoverable style="width: 100%">
        <template  v-for="column in columns">
          <div v-if="column.key!='ACTION'">
            <span>{{column.title}} : </span>
            <span v-if="!column.customRender">{{data[column.key]}}</span>
            <span v-else>
               <ItemRender :record="data" :index="index" :dataIndex="column.key" :customRender="column.customRender"></ItemRender>
            </span>
          </div>
        </template>
        <template #actions>
          <template v-for="column in columns">
            <div v-if="column.key=='ACTION'">
              <div>
                <action :record="data" :index="index" :customRender="column.customRender"></action>
              </div>
            </div>
          </template>
        </template>
      </a-card>
    </a-col>
  </div>
  </div>
</template>
<script lang="ts" setup>
import {SettingOutlined, EditOutlined, EllipsisOutlined} from '@ant-design/icons-vue';
import {ref, toRefs, watch} from "vue";
import Action from "@/components/core/mobile-card-table/action";
import ItemRender from "@/components/core/mobile-card-table/itemRender";
import {cardProperty} from "@/components/core/mobile-card-table/cardProperty";
import {change} from "@/components/core/mobile-card-table/cardProperty";

const props = defineProps(cardProperty);

// const emit = defineEmits(change);
// emit('change',...props.page);

// watch(() => props.page, (newValue, oldValue) => {
//   console.log(newValue)
// })

</script>

